<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<script src="../js/jquery-2.1.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/ajax.js"></script>
		<style>
		
			body{
				background-color: #000000;
				padding: 0px;
				margin: 0px;
			}
		
			.menu-div{
				/* border: 1px solid red; */
				display: block;
				width: 100%;
				height: 40px;
				line-height: 40px;
				text-align: left;
				padding: 0px;
			}
			
			.menu-div a{
				/* border: 1px solid blue; */
				display: block;
				width: 100%;
				margin: 0px;
				padding: 0px;
				
			}
			
			
			.parent-size{
				font-size: 16px;
				font-family: 微软雅黑;
				color: red;
			}
			
			.menu-child{
				font-size: 14px;
				text-align: center;
			}
			
			.menu-child{
				display: none;
			}
			
			ul,li{
				margin:0px;
				padding:0px
			}
			
			
			
			a:link {
			    color:white;
			    text-decoration:none;
			}
			
			a:visited {
			    color:white;
			    text-decoration:none;
			}
			    
			a:hover {
			    color:red;
			    text-decoration:none;
				background-color: #204D74;
			}
			    
			a:active {
			    color:white;
			    text-decoration:none;
			}
			
			.align-right{
				text-align: right;
			}
		</style>
		
		<script>
			$(function(){
				//alert('111');
				
				//给1级菜单绑定事件 
				$('.menu-parent').click(function(){
					
					//当点击父菜单的时候 自己的儿子打开
					console.log("enter..");
					var _this= $(this);
					var child= _this.find('li');
					
					//child.css('display','block');
					
					//增加动画效果
					child.fadeIn();
					child.fadeIn("slow");
					child.fadeIn(50);
					
					//当点击父菜单的时候 其他的儿子隐藏
					var brother= _this.siblings();
					var brotherChild= brother.find('li');
					brotherChild.css('display','none');
					
				});
			});
		</script>
	</head>
	<body>
		
		<ul class="menu-div">
			<li class="menu-parent">
				<a href="#" class="parent-size"><span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span>&nbsp;学生模块</a>
				<ul>
					<li class="menu-child"><a href="delay-student.html" target="right"><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>&nbsp;查看迟到信息</a></li>
					<li class="menu-child"><a href="student-holiday.html" target="right"><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>&nbsp;查看请假信息</a></li>
					<!-- <li class="menu-child"><a href="../biao/allQuestion.html" target="right"><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>&nbsp;录入面试信息</a></li> -->
				</ul>
			</li>
			
			<!-- <li class="menu-parent">
				<a href="#" class="parent-size"><span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span>&nbsp;班级模块</a>
				<ul>
					<li class="menu-child"><a href="class-manager.html" target="right"><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>&nbsp;班级管理</a></li>
					<li class="menu-child"><a href="#"><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>&nbsp;分配老师</a></li>
				</ul>
			</li>
			
			<li class="menu-parent">
				<a href="#" class="parent-size"><span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span>&nbsp;老师模块</a>
				<ul>
					<li class="menu-child"><a href="teacher-manager.html" target="right"><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>&nbsp;老师管理</a></li>
					<li class="menu-child"><a href="#"><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>&nbsp;分配班级</a></li>
				</ul>
			</li> -->
		</ul>
			
	</body>
</html>
